import React, { useState, useEffect } from 'react';
import {
  Form,
  Input,
  Button,
  DatePicker,
  Upload,
  Alert,
  Cascader,
  Space,
  Select,
} from 'antd';
import {
  CaretUpOutlined,
  CaretDownOutlined,
  DeleteOutlined,
  MinusCircleOutlined,
  PlusOutlined,
  InfoCircleOutlined,
} from '@ant-design/icons';

import 'antd/dist/antd.less';
import './ActivityInformationForm.less';
import { set } from '@umijs/deps/compiled/lodash';

export default function ActivityInformationForm(props) {
  const { Option } = Select;
  // console.log(props.editList);
  const {
    signUpForm,
    voteForm,
    labelSignUp,
    labelVote,
    labelTickets,
    labelSignIn,
    labelDrawPrize,
  } = props;
  // todo 这是 报名 标签的数据
  // ? 这是报名标签的下拉框
  const [collapseRegistrationStripFlag, setCollapseRegistrationStripFlag] = useState(true);
  const collapseRegistrationStripClick = () => {
    setCollapseRegistrationStripFlag(!collapseRegistrationStripFlag);
  };

  // todo 这是 投票 标签
  // ? 这是投票标签的下拉框
  const [collapseVotingStripFlag, setCollapseVotingStripFlag] = useState(true);
  const collapseVotingStripClick = () => {
    setCollapseVotingStripFlag(!collapseVotingStripFlag);
  };

  // todo 这是 门票 标签
  // ? 这是报名标签的下拉框
  const [foldingTicketsStripFlag, setFoldingTicketsStripFlag] = useState(true);
  const foldingTicketsStripClick = () => {
    setFoldingTicketsStripFlag(!foldingTicketsStripFlag);
  };

  // todo 这是 签到 标签
  // ? 这是报名标签的下拉框
  const [foldCheckInStripFlag, setFoldCheckInStripFlag] = useState(true);
  const foldCheckInStripClick = () => {
    setFoldCheckInStripFlag(!foldCheckInStripFlag);
  };

  // todo 这是 抽奖 标签
  // ? 这是报名标签的下拉框
  const [foldingLotteryStripFlag, setFoldingLotteryStripFlag] = useState(true);
  const foldingLotteryStripClick = () => {
    setFoldingLotteryStripFlag(!foldingLotteryStripFlag);
  };

  // * -----------------------------------------------------------
  // todo 这是日历
  const { RangePicker } = DatePicker;

  // * -----------------------------------------------------------
  // todo 这是 选填的标签的数据
  const [optionalLabel, setOptionalLabel] = useState([
    { key: '0', name: '姓名', classTrue: false },
    { key: '1', name: '性别', classTrue: false },
    { key: '2', name: '图片', classTrue: false },
    { key: '3', name: '手机号', classTrue: false },
    { key: '4', name: '生日', classTrue: false },
    { key: '5', name: 'QQ号', classTrue: false },
    { key: '6', name: '邮箱', classTrue: false },
    { key: '7', name: '学院', classTrue: false },
    { key: '8', name: '年纪', classTrue: false },
    { key: '9', name: '班级', classTrue: false },
    { key: '10', name: '学号', classTrue: false },
    { key: '11', name: '特长', classTrue: false },
    { key: '12', name: '备注', classTrue: false },
  ]);
  const newOptionalLabel = (list, props) => {
    const newList = list;
    if (props.editList.activityVOS?.[0].requiredEntryForms) {
      // console.log('ragaerg', props.editList.activityVOS);
      for (let i of props.editList.activityVOS?.[0].requiredEntryForms) {
        list.forEach((item, index) => {
          if (item.name == i.key) {
            newList[index].classTrue = true;
          }
        });
      }
    }
    setOptionalLabel([...optionalLabel]);
  };
  useEffect(() => {
    newOptionalLabel(optionalLabel, props);
  }, [props.editList.id]);

  // todo 这是自定义的选项按钮组件
  const SignUpBtn = ({ value = {}, onChange }) => {
    const optionalLabelChange = (item, index) => {
      optionalLabel[index].classTrue = !optionalLabel[index].classTrue;
      setOptionalLabel([...optionalLabel]);
    };
    // todo 传值给表单
    useEffect(() => {
      signUpForm.setFieldsValue({ signUpBtn: optionalLabel });
    }, []);

    return optionalLabel.map((item, index) => {
      return (
        <div
          key={item.key}
          className={item.classTrue ? 'labelOver' : 'label'}
          onClick={() => {
            optionalLabelChange(item, index);
          }}
        >
          {item.name}
        </div>
      );
    });
  };

  // *----------------------------------------------------------------------------
  // todo 投票的数据
  const [fileListRight, setFileListRight] = useState([]);
  const handleChange = (value) => {};

  // todo 左边的图片上传写在里面的方法
  const [imageUrl, setImageUrl] = useState('');
  useEffect(() => {
    // console.log(voteForm.getFieldValue().votingObject?.[0].first2.file.response.data.imgUrl);
    // setImageUrl([voteForm.getFieldValue().votingObject?.[0].first2.file.response.data.imgUrl]);
  }, []);
  function getBase64(img, callback) {
    const reader = new FileReader();
    reader.addEventListener('load', () => callback(reader.result));
    reader.readAsDataURL(img);
  }
  const normFile = (e) => {
    // console.log('Upload event:', e);
    if (Array.isArray(e)) {
      return e;
    }

    return e && e.fileList;
  };
  const [loading, setLoading] = useState(false);

  const [thumbImageUrl, setThumbImageUrl] = useState('');
  const [imgIndex, setImgIndex] = useState(0);
  const handleChangeIndex = (index) => {
    // console.log(index);
  };
  const handleChangeImg = (info) => {
    // console.log(info);
    if (info.file.status === 'uploading') {
      setLoading(true);
      return;
    }
    if (info.file.status === 'done') {
      // console.log(info.file.originFileObj);
      // Get this url from response in real world.
      getBase64(info.file.originFileObj, (image) => {
        // imageUrl.push(image);
        setLoading(false);
        // imageUrl.push(imageUrl)
        // setImageUrl([...imageUrl]);
        setImageUrl(image);
        // setImageKey(1)
      });
    }
  };

  // * ---------------------------------------------------------------------------
  return (
    // todo 第二页的 form 表单最大盒子
    <div className="activityInformationFormSecond">
      {/* 这是标签创建的活动表单大盒子 */}
      <div className="labelActivityForm">
        {/* 这是 折叠报名的表单 */}
        {/* 这是折叠表单 下拉条 */}
        <div style={{ display: labelSignUp ? 'block' : 'none' }}>
          <div className="collapseStrip" onClick={collapseRegistrationStripClick}>
            <div className="collapseStripLeft">报名</div>
            <div
              className="collapseStripRight"
              style={{ display: collapseRegistrationStripFlag ? 'block' : 'none' }}
            >
              收起
              <CaretUpOutlined className="collapseIcon" />
            </div>
            <div
              className="collapseStripRight"
              style={{ display: collapseRegistrationStripFlag ? 'none' : 'block' }}
            >
              展开
              <CaretDownOutlined className="collapseIcon" />
            </div>
          </div>
          {/* 这是报名折叠 表单内容 */}
          <div
            className="collapseContent"
            style={{ display: collapseRegistrationStripFlag ? 'block' : 'none' }}
          >
            <Form
              form={signUpForm}
              name="signUpForm"
              layout="vertical"
              labelCol={{
                span: 8,
              }}
              wrapperCol={{
                span: 20,
              }}
              initialValues={{
                remember: true,
              }}
            >
              {/* 这是报名的 标题1 */}
              <div className="title">
                <div className="bar"></div>
                <div className="text">基本信息</div>
              </div>

              {/* 这是报名的 内容1 */}
              <div className="box">
                <div className="boxLeft">
                  <Form.Item
                    name="rangePicker"
                    label="活动时间"
                    rules={[
                      {
                        type: 'array',
                        required: true,
                        message: '请输入报名活动时间 !',
                      },
                    ]}
                  >
                    <RangePicker showTime format="YYYY-MM-DD HH:mm" />
                  </Form.Item>
                </div>
                <div className="boxRight">
                  <Form.Item label="报名人数" name="activityAddress">
                    <Input placeholder="不填即无限制" />
                  </Form.Item>
                </div>
              </div>

              {/* 这是报名的 标题2 */}
              <div className="title">
                <div className="bar"></div>
                <div className="text">选择您希望活动参加者填写的信息</div>
              </div>
              {/* 这是报名的 内容2 */}
              <div className="box">
                {/* 这是自定义的选项按钮组件 */}
                <Form.Item name="signUpBtn" className="signUpBtn">
                  <div>
                    <SignUpBtn />
                  </div>
                </Form.Item>
              </div>
              {/* 这是报名的 标题3 */}
              <div className="title">
                <div className="bar"></div>
                <div className="text">可添加补充项目</div>
              </div>
              {/* 这是报名的 内容3 */}
              <div className="box">
                <div>
                  <div className="scheduleName">项目名称</div>
                  <Form.List name="addItems">
                    {(fields, { add, remove }) => (
                      <>
                        {fields.map(({ key, name, fieldKey, ...restField }) => (
                          <Space
                            key={key}
                            style={{ display: 'flex', marginBottom: 8 }}
                            align="baseline"
                          >
                            <Form.Item
                              {...restField}
                              name={[name, 'key']}
                              fieldKey={[fieldKey, 'key']}
                              rules={[
                                {
                                  required: true,
                                  message: '请输入项目名称 !',
                                },
                              ]}
                            >
                              <Input placeholder="请输入项目名称，如爱好" />
                            </Form.Item>
                            <DeleteOutlined className="garbageCan" onClick={() => remove(name)} />
                          </Space>
                        ))}
                        <Form.Item>
                          <Button type="dashed" onClick={() => add()} block>
                            + 添加
                          </Button>
                        </Form.Item>
                      </>
                    )}
                  </Form.List>
                </div>
              </div>
            </Form>
          </div>
        </div>
        {/* 折叠报名的表单 结束*/}

        {/* 折叠投票表单 */}
        <div style={{ display: labelVote ? 'block' : 'none' }}>
          <div className="collapseStrip" onClick={collapseVotingStripClick}>
            <div className="collapseStripLeft">投票</div>
            <div
              className="collapseStripRight"
              style={{ display: collapseVotingStripFlag ? 'block' : 'none' }}
            >
              收起
              <CaretUpOutlined className="collapseIcon" />
            </div>
            <div
              className="collapseStripRight"
              style={{ display: collapseVotingStripFlag ? 'none' : 'block' }}
            >
              展开
              <CaretDownOutlined className="collapseIcon" />
            </div>
          </div>
          {/* 这是投票折叠 表单内容 */}
          <div
            className="collapseContent"
            style={{ display: collapseVotingStripFlag ? 'block' : 'none' }}
          >
            <Form
              form={voteForm}
              name="signUpForm"
              layout="vertical"
              labelCol={{
                span: 8,
              }}
              wrapperCol={{
                span: 20,
              }}
              initialValues={{
                votingMethod: '1',
              }}
            >
              {/* 这是投票的 标题1 */}
              <div className="title">
                <div className="bar"></div>
                <div className="text">基本信息</div>
              </div>

              {/* 这是投票的 内容1 */}
              <div className="box">
                <div className="boxLeft">
                  <Form.Item
                    name="rangePicker"
                    label="活动时间"
                    rules={[
                      {
                        required: true,
                        message: '请输入报名活动时间 !',
                      },
                    ]}
                  >
                    <RangePicker showTime format="YYYY-MM-DD HH:mm" />
                  </Form.Item>
                </div>
                <div className="boxRight">
                  <Form.Item
                    label="投票方式"
                    name="votingMethod"
                    rules={[
                      {
                        required: true,
                        message: '请输选择投票方式 !',
                      },
                    ]}
                  >
                    <Select onChange={handleChange}>
                      <Option value="1">{'只可投一次'}</Option>
                      <Option value="2">{'可以投两次'}</Option>
                      <Option value="3">{'可以投三次'}</Option>
                    </Select>
                  </Form.Item>
                </div>
              </div>

              {/* 这是投票的 标题2 */}
              <div className="title">
                <div className="bar"></div>
                <div className="text">投票对象</div>
              </div>

              {/* 这是投票的 内容2 */}

              <Form.List name="votingObject">
                {(fields, { add, remove }) => (
                  <>
                    {fields.map(({ key, name, fieldKey, ...restField }, index) => (
                      <div className="box" key={key}>
                        <div className="boxLeft">
                          <Form.Item
                            label="名称"
                            {...restField}
                            name={[name, 'first']}
                            fieldKey={[fieldKey, 'first']}
                            rules={[{ required: true, message: '请输入对象名称 !' }]}
                          >
                            <Input placeholder="请输入对象名称" />
                          </Form.Item>
                          {/* 这是图片 */}
                          <Form.Item
                            className="uploadImgLeft"
                            label="图片"
                            valuePropName="fileList"
                            getValueFromEvent={normFile}
                            {...restField}
                            name={[name, 'first2']}
                            fieldKey={[fieldKey, 'first2']}
                            rules={[{ required: true, message: '请添加图片!' }]}
                          >
                            <Upload
                              name="multipartFile"
                              action="/campus/campusweb/upload/pictureUpload"
                              listType="picture-card"
                              className="avatar-uploader"
                              onChange={handleChangeImg}
                            >
                              {false ? (
                                <img src={imageUrl} alt="avatar" style={{ height: '90px' }} />
                              ) : (
                                <div>
                                  <PlusOutlined />
                                  <div style={{ marginTop: 8 }}>Upload</div>
                                </div>
                              )}
                            </Upload>
                          </Form.Item>
                          <div className="votingObjectIcon">
                            <InfoCircleOutlined /> 支持扩展名：jpg.jpeg.png
                          </div>
                        </div>
                        <div className="boxRight">
                          <Form.Item
                            label="说明"
                            {...restField}
                            name={[name, 'last']}
                            fieldKey={[fieldKey, 'last']}
                            rules={[{ required: true, message: '请输入对象说明 !' }]}
                          >
                            <Input placeholder="请输入对象说明" />
                          </Form.Item>
                        </div>
                        <MinusCircleOutlined
                          onClick={() => remove(name, setImgIndex(imgIndex - 1))}
                        />
                      </div>
                    ))}
                    <Form.Item>
                      <Button
                        type="dashed"
                        onClick={() => add(setImgIndex(imgIndex + 1))}
                        block
                        icon={<PlusOutlined />}
                      >
                        添加
                      </Button>
                    </Form.Item>
                  </>
                )}
              </Form.List>
              {/* --- */}
            </Form>
          </div>

          {/* 这是投票折叠 表单内容 结束*/}
        </div>
        {/* 折叠投票表单  结束*/}

        {/* 折叠门票表单 */}
        <div style={{ display: labelTickets ? 'block' : 'none' }}>
          <div className="collapseStrip" onClick={foldingTicketsStripClick}>
            <div className="collapseStripLeft">门票</div>
            <div
              className="collapseStripRight"
              style={{ display: foldingTicketsStripFlag ? 'block' : 'none' }}
            >
              收起
              <CaretUpOutlined className="collapseIcon" />
            </div>
            <div
              className="collapseStripRight"
              style={{ display: foldingTicketsStripFlag ? 'none' : 'block' }}
            >
              展开
              <CaretDownOutlined className="collapseIcon" />
            </div>
          </div>
          {/* 这是门票折叠 表单内容 */}
          <div
            className="collapseContent"
            style={{ display: foldingTicketsStripFlag ? 'block' : 'none' }}
          ></div>
          {/* 这是门票折叠 表单内容 结束*/}
        </div>
        {/* 折叠门票表单  结束*/}

        {/* 折叠签到表单 */}
        <div style={{ display: labelSignIn ? 'block' : 'none' }}>
          <div className="collapseStrip" onClick={foldCheckInStripClick}>
            <div className="collapseStripLeft">签到</div>
            <div
              className="collapseStripRight"
              style={{ display: foldCheckInStripFlag ? 'block' : 'none' }}
            >
              收起
              <CaretUpOutlined className="collapseIcon" />
            </div>
            <div
              className="collapseStripRight"
              style={{ display: foldCheckInStripFlag ? 'none' : 'block' }}
            >
              展开
              <CaretDownOutlined className="collapseIcon" />
            </div>
          </div>
          {/* 这是签到折叠 表单内容 */}
          <div
            className="collapseContent"
            style={{ display: foldCheckInStripFlag ? 'block' : 'none' }}
          ></div>
          {/* 这是签到折叠 表单内容 结束*/}
        </div>
        {/* 折叠签到表单  结束*/}

        {/* 折叠抽奖表单 */}
        <div style={{ display: labelDrawPrize ? 'block' : 'none' }}>
          <div className="collapseStrip" onClick={foldingLotteryStripClick}>
            <div className="collapseStripLeft">抽奖</div>
            <div
              className="collapseStripRight"
              style={{ display: foldingLotteryStripFlag ? 'block' : 'none' }}
            >
              收起
              <CaretUpOutlined className="collapseIcon" />
            </div>
            <div
              className="collapseStripRight"
              style={{ display: foldingLotteryStripFlag ? 'none' : 'block' }}
            >
              展开
              <CaretDownOutlined className="collapseIcon" />
            </div>
          </div>
          {/* 这是抽奖折叠 表单内容 */}
          <div
            className="collapseContent"
            style={{ display: foldingLotteryStripFlag ? 'block' : 'none' }}
          ></div>
          {/* 这是抽奖折叠 表单内容 结束*/}
        </div>
        {/* 折叠抽奖表单  结束*/}
      </div>
      {/* 这是标签创建的活动表单大盒子 结束 */}
    </div>
    // todo 第二页的 form 表单最大盒子 --- 结束
  );
}
